<template>
    <div>
        <search-bar></search-bar>
        <!-- 轮播图 -->
        <swiper indicator-dots=true autoplay interval="3000">
            <swiper-item v-for="(item,index) in swiperdata" :key="index">
                <image :src="item.image_src"></image>
            </swiper-item>
        </swiper>
        <!-- 菜单 -->
        <div class="menu">
            <div class="menu-item" v-for="(item,index) in catitems" :key="index">
                <image :src="item.image_src"></image>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="floor" v-for="(item,index) in floorData1" :key="index">
            <div class="floor-title">
                <img :src="item.floor_title.image_src" alt="">
            </div>
            <div class="floor-content">
                <div class="left">
                    <img :src="item.leftImagePath" alt="">
                </div>
                <div class="right">
                    <img  v-for="(img,i) in item.product_list" :key="i" :src="img.image_src" alt="">
                </div>
            </div>
        </div>
        <!-- 回到顶部 -->
        <div class="top" v-show="flag" @click="toTop">
            ︿
            <p>顶部</p>
        </div>
    </div>
</template>

<script>
import request from '../../utils/request.js'
import SearchBar from '../../components/SearchBar.vue'
export default {
    data() {
        return {
          swiperdata:[] ,
          catitems:[],
          floorData:[],
          flag:false
        }
    },
    components:{
        SearchBar
    },
    methods: {
        async initData() {
            let swiperRes =await request('home/swiperdata');
            this.swiperdata=swiperRes.data.message
            let menuRes =await request('home/catitems')
            this.catitems=menuRes.data.message
            let floorRes =await request('home/floordata')
            this.floorData=floorRes.data.message
        },
        toTop() {
            wx.pageScrollTo({
                scrollTop: 0
            })
        }
    },
    computed: {
        floorData1() {
            return this.floorData.map(item =>{
                item.leftImagePath =item.product_list[0].image_src
                item.product_list=item.product_list.filter((item,index)=>{
                    return index>0
                })
                return item
            })
        }
    },
    created() {
        // request('home/swiperdata').then(res=>{
        //    this.swiperdata=res.data.message
        // }),
        // wx.request({
        //     url:"https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata",
        //     method:"get",
        //     success:(res)=>{
        //         this.swiperdata=res.data.message
        //     }
        // }),
        // wx.request({
        //     url:"https://www.zhengzhicheng.cn/api/public/v1/home/catitems",
        //     method:"get",
        //     success:(res)=>{
        //         this.catitems=res.data.message
        //     }
        // }),
        this.initData()
    },
    onPullDownRefresh() {
      this.initData()
    },
    onPageScroll(params) {
       this.flag=params.scrollTop>100
    }
}
</script>

<style scoped lang="less">
   @import './main.less';
</style>

